/*—————————————————————————————————————————————————*
|  Saurus ∷ WhiteLabel Transação ∷                 |
*——————————————————————————————————————————————————*/

/* ╔═══════════════════════════════════════════╗ 
   ║      ⫸⫸ Configurações Rápidas            ║
   ╚═══════════════════════════════════════════╝ 
*/

/* ►► Cores ◄◄  */
:root {
    --degrade-barra-navegacao: linear-gradient(292deg, rgba(44,139,182,1) 0%, rgba(17,194,230,1) 100%);
    --degrade-rodape: linear-gradient(292deg, rgba(44,139,182,1) 0%, rgba(17,194,230,1) 100%);
    --resposta-pagamento: rgba(17,194,230,1);
    --cor-principal: rgba(17,194,230,1);
    --circulos: rgba(17,194,230, .7);
    --topo-tabela: #075162;
    --degrade-botoes: linear-gradient(292deg, rgba(44,139,182,1) 0%, rgba(17,194,230,1) 100%);
    --degrade-cartao-de-credito: radial-gradient(at 30% 97%, hsla(212,55%,45%,1) 0, transparent 53%), radial-gradient(at 80% 38%, hsla(212,87%,49%,1) 0, transparent 86%), radial-gradient(at 3% 13%, hsla(169,76%,78%,1) 0, transparent 91%), radial-gradient(at 4% 81%, hsla(240,76%,67%,1) 0, transparent 100%);
}

/* ►► Rodapé ◄◄  */
:root {
    --formato-rodape: polygon(14% 100%, 0 100%, 0 76%, 26% 81%, 55% 76%, 76% 77%, 100% 76%, 100% 100%, 85% 100%, 65% 100%, 50% 100%, 32% 100%);
    --altura-rodape: 80%;
}

/* ►► Barra de navegação ◄◄  */
:root { 
    --tamanho-logo: 200px;
}

/* ╔═══════════════════════════════════════════╗ 
   ║      ⫸⫸ Configurações Detalhadas         ║
   ╚═══════════════════════════════════════════╝ 
*/

/* ――――――――――― Barra de navegação ――――――――――― */
.ui.inverted.segment.my-nav {
    background-image: var(--degrade-barra-navegacao) !important;
}

    .ui.inverted.segment.my-nav.esp {
        background-image: var(--cor-principal) !important;
        background-color: var(--cor-principal) !important;
    }

#nav-img {
    width: var(--tamanho-logo) !important;
}

/* ――――――――――― Rodapé ――――――――――― */
.footer {
    background-image: var(--degrade-rodape) !important;
    clip-path: var(--formato-rodape) !important;
    height: var(--altura-rodape) !important;
}

table thead tr {
    background-color: var(--topo-tabela) !important;
}

.circle {
    background-color: var(--circulos) !important;
}

.esp-footer {
    background-color: var(--cor-principal) !important;
    clip-path: var(--formato-rodape) !important;
    height: var(--altura-rodape) !important;
}

/* ――――――――――― Tela de resposta do pagamento ――――――――――― */
.resposta-head.cancelado {
    background-image: linear-gradient(248deg, rgba(207,36,67,1) 0%, rgba(164,48,112,1) 87%, var(--resposta-pagamento) 100%) !important;
}

.resposta-head.concluido {
    background-image: linear-gradient(248deg, rgba(45,167,93,1) 29%, var(--resposta-pagamento) 100%) !important;
}

.resposta-head.estornado {
    background-image: linear-gradient(198deg, rgba(215,159,64,1) 0%, rgba(200,143,79,1) 43%, var(--resposta-pagamento) 100%) !important;
}

.resposta-head.pendente {
    background-image: linear-gradient(191deg, rgba(255,255,255,1) 0%, var(--resposta-pagamento) 100%) !important;
}

/* ――――――――――― Objetos do site ――――――――――― */

svg path {
    fill: var(--cor-principal) !important;
    fill-opacity: 0.4 !important;
}

/* ――――――――――― Cartão de crédito ――――――――――― */


.jp-card .jp-card-back, .jp-card .jp-card-front {
    background: var(--cor-principal) !important;
    border-radius: 15px !important;
    background-image: var(--degrade-cartao-de-credito) !important;
}

.jp-card.jp-card-identified .jp-card-front:before, .jp-card.jp-card-identified .jp-card-back:before {
    background-image: var(--degrade-cartao-de-credito) !important;
}